<template>
  <div>子组件</div>
  <!-- <div>js父传子：{{ name }}</div> -->
  <div>ts父传子：{{ name }}</div>
  <button @click="sendFather">自定义事件子传父</button>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue';
// js父传子：defineProps
// const props = defineProps({
//   name: {
//     type: String,
//     default: 'js默认名字'
//   }
// })
// console.log(props.name)

// ts父传子：defineProps
// 无默认值写法
// defineProps<{
//   name: string;
// }>();
// 提供默认值
withDefaults(
  defineProps<{
    name: string;
    arr?: string[];
  }>(),
  {
    name: 'ts默认名字',
    arr: () => ['ts默认数组'] // 使用函数返回,防止引用
  }
);

// js子传父:自定义事件
const sonName = '子传父';
// const emit = defineEmits(['on-click']); // defineEmits不需要引入
// ts子传父:自定义事件
const emit = defineEmits<{
  (e: 'on-click', sonName: string): void; // 方法，e表示方法名为 on-click
}>();
// 触发自定义事件
const sendFather = () => {
  console.log('触发自定义事件');
  // 使用 emit
  emit('on-click', sonName);
};

// 子组件向父组件暴露属性或者方法
defineExpose({
  name: 'defineExpose子传父值',
  open: () => console.log('defineExpose子传父方法')
});
</script>

<style lang="scss" scoped></style>
